import { Button, Cascader, Form, Input, message, Space } from "antd";
import { countryData, CountryOption } from "@/utils/country-data";
import { FormOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import type { userGetuserInfoReturnModel } from "@/api/modules/user";
import { userModify } from "@/api/modules/user";
const { TextArea } = Input;
import { setUserInfo } from "@/redux/modules/global/action";
import { getUserInfo } from "@/utils/getUserInfo";
const Information = (props: any) => {
	const { userInfo, setUserInfo }: { userInfo: userGetuserInfoReturnModel; setUserInfo: Function } = props;
	const [loading, setLoading] = useState<boolean>(false);
	const [form] = Form.useForm();
	// 修改sku规格表单失败回调
	const onFinishFailed = (errorInfo: any) => {
		message.warning("请检查表单填写是否正确！");
		console.log("Failed:", errorInfo);
	};
	// 提交新增/修改表单
	const onFinish = async (form: any) => {
		console.log("form", form);
		modifyUserInfo(form);
	};
	// 修改用户基础信息
	async function modifyUserInfo(form: any) {
		try {
			setLoading(true);
			const { code, msg } = await userModify({
				userName: form.userName,
				descText: form.descText,
				addressName: form.addressName,
				province: form.province,
				city: form.city,
				county: form.county,
				addressDetail: form.addressDetail
			});
			if (code === 0) {
				message?.success(msg);
				refreshUserInfo();
			}
		} finally {
			setLoading(false);
		}
	}
	// 刷新获取用户信息接口
	function refreshUserInfo() {
		getUserInfo().then(res => {
			setUserInfo(res);
		});
	}
	useEffect(() => {
		// 表单回显
		form.setFieldsValue({
			userName: userInfo?.userName || "",
			descText: userInfo?.descText || "",
			addressName: userInfo?.addressName || "",
			cascaderValue: [userInfo?.province, userInfo?.city, userInfo?.county],
			addressDetail: userInfo?.addressDetail || ""
		});
	}, [userInfo]);
	useEffect(() => {
		// 获取当前用户信息
		getUserInfo();
	}, []);
	return (
		<Form
			form={form}
			preserve={false}
			size="middle"
			autoComplete="off"
			layout={"vertical"}
			onFinish={onFinish}
			onFinishFailed={onFinishFailed}
		>
			<Form.Item label="店铺名称" name="userName" rules={[{ required: true, message: "请输入店铺名称" }]}>
				<Input placeholder="输入店铺名称" maxLength={200} showCount />
			</Form.Item>
			<Form.Item label="店铺简介" name="descText" rules={[{ required: true, message: "请输入店铺简介" }]}>
				<TextArea autoSize={{ minRows: 3 }} placeholder="输入店铺简介" showCount={true} allowClear={true} />
			</Form.Item>
			<Form.Item label="店铺联系人" name="addressName" rules={[{ required: true, message: "请输入店铺联系人" }]}>
				<Input placeholder="输入店铺联系人" maxLength={200} showCount />
			</Form.Item>
			<Form.Item label="店铺区域" name="cascaderValue" rules={[{ required: true, message: "请选择店铺省市区域" }]}>
				<Cascader options={countryData} expandTrigger="hover" placeholder="选择店铺省市区域" />
			</Form.Item>
			<Form.Item
				label="店铺详细地址"
				name="addressDetail"
				rules={[{ required: true, message: "请输入店铺详细地址，具体到街道、门牌号" }]}
			>
				<TextArea
					autoSize={{ minRows: 3 }}
					placeholder="输入店铺详细地址，具体到街道、门牌号"
					showCount={true}
					allowClear={true}
				/>
			</Form.Item>
			<Space wrap>
				<Button type="primary" loading={loading} icon={<FormOutlined />} onClick={() => form.submit()}>
					更 新
				</Button>
			</Space>
		</Form>
	);
};
const mapState = (state: any) => ({
	userInfo: state.global.userInfo
});
const mapDispatchToProps = { setUserInfo };
export default connect(mapState, mapDispatchToProps)(Information);
